<!--
 * @Author: atao
 * @Date: 2023-12-08 15:53:57
 * @LastEditTime: 2023-12-14 16:19:48
 * @FilePath: \yayun-web000\src\components\MainLayout.vue
-->
<template>
    <div class="application-container">
        <div class="main-layout">
            <aside>
                <div class="brand">飞跃服装系统</div>
                <section>
                   <MyMenu :isCollapse="isCollapse"></MyMenu>
                </section>
            </aside>
            <main>
                <nav>
                    <div class="half"></div>
                    <div class="half"></div>
                </nav>
                <article>
                    <router-view></router-view>
                </article>
            </main>

        </div>
    </div>
</template>
<script>
import MyMenu from "./MyMenu.vue";
export default {
    components: {MyMenu},
    data() {
        return {
               isCollapse:false
        }
    }
}
</script>
<style lang="less" scoped>
@import "../style/common.less";

.main-layout {
    .rel();
    display: flex;

    >aside {
        flex: 0 0 241px;
        width: 0;
        background: #001628;

        //65px
        >.brand {
            height: 49px;
            border-bottom: solid 1px @g03;
            line-height: 48px;
            padding-left: 65px;
            font-size: 20px;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            transition: all 0.3s linear;

            &::before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 48px;
                height: 48px;
                background: url(../../public/logo.png) center center /32px 32px no-repeat;
            }
        }

        >section {
            .rel(calc(100% - 49px));
            overflow-x: hidden;
        }
    }

    >main {
        flex: 1;
        width: 0;

        >nav {
            display: flex;
            background: @g03;
            height: 48px;
            box-shadow: 10px 0 12px rgba(0, 0, 0, .2);

            >.half {}
        }

        >article {
            .rel(calc(100% - 48px));
            // height: 100%;
            padding: 12px
        }
    }
}
</style>